<template>
  <div class="box">
    <el-input placeholder="请输入内容" v-model="form.title" style=" margin-bottom:10px ">
      <template slot="prepend">标题</template>
    </el-input>
    <VueEditor v-model="form.content" :useCustomImageHandler="true" @image-added="imgUpload" />

    <el-upload
        :action=" $axios.defaults.baseURL + '/upload' "
        :headers="{Authorization: token}"
        list-type="picture-card"
        :on-success="success"
        :on-remove="handleRemove"
        style="margin-top: 10px;">
        <i class="el-icon-plus"></i>
    </el-upload>

    <el-form style="margin-top:20px;">
        <el-checkbox-group v-model="checkList">
            <el-checkbox 
                :label="item.id" 
                v-for="item in categoriesList" 
                :key="item.id"
                >
                {{item.name}}
                </el-checkbox>
        </el-checkbox-group>
    </el-form>

    <div style="margin-top:20px;">
        <template>
            <el-radio v-model="form.type" label="1">普通图片文章</el-radio>
            <el-radio v-model="form.type" label="2">视频文章</el-radio>
        </template>
    </div>

    <el-form style="text-align: right; margin-top:30px;">
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即发布</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor,
  },
  data(){
      return{
          form:{
            title:'',
            content:'',
            categories:[],
            cover:[],
            type:'1'
          },
          token:localStorage.getItem('token'),
          categoriesList:[],
          checkList:[1]
      }
  },
  created(){
      this.getcolumn()
  },
  watch:{
      checkList(){
        this.form.categories = this.checkList.map(el=>{
            return{
                id:el
            }
        })
      }
  },
  methods:{
      getcolumn(){  //获取栏目
          this.$axios({
              url:'/category',
          }).then(res=>{
              console.log(res);
              this.categoriesList = res.data.data.filter(item=>{
                  return item.id != '999'
              })
              console.log(this.categoriesList);
          })
      },

      success(res, file, fileList){  //上传成功的的钩子
          file.id = res.data.id
          this.form.cover.push(file)
          console.log(this.form.cover);
      },
      handleRemove(file, fileList){  //删除图片后的钩子
          //file:删除的图片信息
          //fileList:删除图片剩余的图片信息,直接赋值给cover
          console.log(fileList);
          this.form.cover = fileList
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          });
      },
      
      imgUpload(File, Editor, cursorLocation, resetUploader){
          //:useCustomImageHandler="true"  禁止里富文本框转换base64 在这里进行处理
          // - Editor 指的是编辑框本身
          // - cursorLocation 指的是当前光标所在位置
          // - resetUploader 上传完毕必须执行的一个复位函数
          const formdata = new FormData()
          formdata.append('file',File)
          this.$axios({
              url:'/upload',
              method:'post',
              headers:{
                  Authorization: 'Bearer ' + localStorage.getItem('token')
              },
              data:formdata
          }).then(res=>{
              console.log(res);
              // 要把这张图片放入编辑器的光标所在位置
            // 下面是富文本框的固定 api 写法
            Editor.insertEmbed(cursorLocation, 'image',this.$axios.defaults.baseURL + res.data.data.url);
            // 另一个固定写法，插入图片后必须复原上传组件
            resetUploader();
          })
      },
      onSubmit(){  //点击发布
          console.log(this.form);
          this.$axios({
              url:'/post',
              data:this.form,
              method:'post',
              headers: {
                  Authorization: localStorage.getItem('token')
              }
          }).then(res=>{
              console.log(res);
          })
      }
  }
};
</script>

<style lang="less" scoped>
</style>